<template>
    <div id="List">
        <div style="margin: 5px; text-align: center; color: purple;">住宿服务推荐</div>
        <a-table style="font-size: 12px;" :columns="columns" :data-source="data" :custom-row="handleRowClick"
            @change="onChange" />
    </div>

</template>
<script setup>
import { ref, watch } from 'vue';
import { spotsInfoStore } from '@/stores/spots';
const spotsStore = spotsInfoStore()
const columns = ref([
    {
        title: '名称',
        dataIndex: 'name',
        sorter: (a, b) => a.name.length - b.name.length,
        sortDirections: ['descend'],
    },
    {
        title: '评分',
        dataIndex: 'rating',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.rating - b.rating,
    },
    {
        title: '距离',
        dataIndex: 'distance',
        sorter: (a, b) => a.distance - b.distance,
        sortDirections: ['descend', 'ascend'],
    },
]);
const data = ref([]);
const onChange = (pagination, filters, sorter) => {
    // console.log('params', pagination, filters, sorter);
};
// 处理行点击事件
const handleRowClick = (record) => {
    return {
        onClick: () => {
            spotsStore.SetTableHouse(record);
            // console.log(record);
        }
    };
};
watch(() => spotsStore.HouseData, (newHouseData) => {
    data.value = []
    for (let i = 0; i < newHouseData.length; i++) {
        data.value.push({
            key: i + 1,
            name: newHouseData[i].name,
            rating: Number(newHouseData[i].business.rating) || 0,
            distance: newHouseData[i].distance,
            address: newHouseData[i].address,
        })
    }
})

</script>
<style lang="scss" scoped>
#List {
    width: 100%;
    height: 100%;
    margin: 5px;
}
</style>